<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 事件流：当一个HTML元素产生事件时，该事件会在当前元素与根元素之间按特定的顺序传播，所有经过的节点都会收到该事件并执行，这个传播过程就是DOM事件流。
        // 分类：事件冒泡、事件捕获
        // 默认情况下，事件使用的是事件冒泡

        // 事件冒泡：当一个元素上的事件被触发时，事件从事件源开始，往上冒泡直到页面的根元素，这一过程被称为事件冒泡（默认方式）
        // 特点：先触发子级元素的事件，再触发父级元素的事件
        // 注意：一般绑定事件的方式，采用的都是事件冒泡

        // window.onload=function(){
        //     document.getElementById("mydiv").onclick=function(){
        //         alert("div");
        //     };
        //     document.getElementById("myp").onclick=function(e){//事件对象
        //         alert("p");
        //         e.stopPropagation();//阻止事件冒泡
        //     };
        // };


        // 事件捕获：当一个元素上的事件被触发时，事件从页面的根元素开始，往下直到事件目标元素，这一过程被称为事件捕获
        // 特点：先触发父级元素的事件，再触发子级元素的事件
        // 注意：可以使用addEventListener()进行事件绑定
        // 使用addEventListener()绑定事件的时候可以指定采用的是事件冒泡还是事件捕获
        // addEventListener("事件类型",函数,布尔值)
        // 布尔值为false或者省略不写的时候，默认是事件冒泡
        // 布尔值为true的时候，表示的是事件捕获
        window.onload=function(){
            document.getElementById("mydiv").addEventListener("click",function(e){
                alert("div");
                e.stopImmediatePropagation();//阻止事件捕获
            },true);
            document.getElementById("myp").addEventListener("click",function(){
                alert("p");
            },true);
        };

        function show(e){
            alert(222);
            e.preventDefault();//阻止事件默认行为
        }
        function show2(e){
            alert(333);
            e.preventDefault();//阻止事件默认行为
        }
    </script>
</head>
<body>
    <div onclick="alert(333)">
        <p onclick="alert(222)">
            <span onclick="alert(111)">itany</span>
        </p>
    </div>

    <div id="mydiv">
        <p id="myp">p</p>
    </div>
    <a href="http://www.baidu.com" onclick="show(event)">我是链接</a>
    <input type="button" value="按钮" oncontextmenu="show2(event)">
</body>
</html>